import React, { useState, useEffect, useCallback } from "react";
import {
  Form,
  Input,
  Row,
  Col,
  Button,
  Table,
  Space,
  message,
  Popconfirm,
} from "antd";
import {
  getAuthList,
  editAuth,
  addAuth,
  searchAuth,
  deleteAuth,
} from "../../../api/auth/index";
import AuthAdd from "../AuthAdd/index";
import AuthEdit from "../AuthEdit/index";

function AuthTable() {
  //表格的列名
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (text) => {
        if (text === 0) return "停用";
        return "启用";
      },
    },
    {
      title: "操作",
      dataIndex: "operator",
      key: "operator",
      render: (text, row, index) => {
        return (
          <Space size="small" split="|" className="space">
            <AuthEdit item={row} updateData={updateData} />
            <Popconfirm
              title="确定删除吗"
              okText="确定"
              cancelText="取消"
              onConfirm={() => delRow(row.id)}
            >
              <Button type="link">删除</Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  const [dataSource, setDataSource] = useState();
  const [form] = Form.useForm();

  useEffect(() => {
    setDataSource(getAuthList());
  }, []);

  //编辑更新表格
  const updateData = (id, detail) => {
    const data = editAuth(id, detail);
    setDataSource(data);
    message.success("修改成功");
  };

  //搜索
  const onSearch = (query) => {
    if (query.id === undefined && query.name === undefined) {
      message.warning("请输入搜索条件后再搜索");
    }
    const auths = searchAuth(query);
    setDataSource(auths);
  };

  //删除权限
  const delRow = (id) => {
    deleteAuth(id);
    setDataSource(getAuthList());
    message.success("删除成功");
  };

  //新增权限 有BUG
  // const getAuthAddData = (newAuth) => {
  //   const newAuths = addAuth(newAuth);
  //   setDataSource(newAuths);
  //   setUpdate({});
  // };

  //新增权限
  const getAuthAddData = useCallback((newAuth) => {
    const newAuths = addAuth(newAuth);
    const newData = [].concat(newAuths);
    setDataSource(newData);
  }, [dataSource]);

  return (
    <>
      <Form
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onSearch}
      >
        <Row gutter={24}>
          <Col span={8}>
            <Form.Item name="id" label="ID">
              <Input placeholder="请输入ID" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="name" label="名称">
              <Input placeholder="请输入名称" />
            </Form.Item>
          </Col>
          <Col span={8} style={{ textAlign: "right" }}>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button
              style={{
                margin: "0 8px",
              }}
              onClick={() => {
                form.resetFields();
              }}
            >
              重置
            </Button>
          </Col>
          <AuthAdd authAddData={getAuthAddData} />
        </Row>
      </Form>
      <Table dataSource={dataSource} columns={columns} />
    </>
  );
}

export default AuthTable;
